<template>
  <van-config-provider :theme-vars="themeVars">
    <div class="login_container">

      <!-- 导航栏 -->
      <van-nav-bar class="login_top" title="网易严选">
        <template #left>
          <van-icon name="wap-home-o" size="32" color="#333" />
        </template>

        <template #right>
          <van-icon name="search" class="login_search" size="32" color="#333" />
          <van-icon name="shopping-cart-o" size="32" color="#333" />
        </template>
      </van-nav-bar>

      <!-- 根1 -->
      <div class="login_type">
        <!-- 下内容根组件 -->
        <div class="login_body">
          <!-- 图片 + 双登录 -->
          <div class="login_item">
            <!-- 中间logo图片 -->
            <div class="login_item_img">
              <van-image width="148" height="50" fit="contain" position="bottom"
                src="	https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" />
            </div>

            <!-- 双登录 -->
            <div class="login_button">
              <van-button class="button_phone" type="danger" size="large" icon="comment-o" :to="{path: '/loginWithPhone'}" >短信验证登录</van-button>

              <van-button class="button_emil" type="default" size="large" icon="envelop-o"  color="#DD1A21" plain :to="{path: '/loginWithEmail'}" >邮箱账号登录</van-button>
            </div>

            <!-- 三个按钮(QQ微信微博) -->
            <div class="push_icon" >
              <div class="commonIcon icon_wechat">
                <van-icon name="wechat" size="20px" />
                <span>微信</span>
              </div>

              <div class="commonIcon icon_qq">
                <van-icon name="qq" size="20px" />
                <span>QQ</span>
              </div>

              <div class="commonIcon icon_weibo">
                <van-icon name="weibo" size="20px" />
                <span>微博</span>
              </div>
            </div>


          </div>
        </div>
      </div>



    </div>
  </van-config-provider>
</template>

<script lang="ts">
  export default {
    name: 'Login'
  }
</script>


<script lang="ts" setup>
import { ref, reactive, createApp } from 'vue';
import { Image as VanImage, Col, Row, Button } from 'vant'
const themeVars = reactive({
  // title字体
  navBarTitleFontSize: '24px',
  // button大小
});
</script>

<style scoped>
/* 导航 */
.login_top {
  background: #fafafa
}

/* 根1 */
.login_type {
  height: 688px;
  display: block;
  
}

/* 根2 */
.login_body {
  height: 100%;
  background: #f2f5f4;
  position: relative;
}

/* 搜索向右扩展 */
.login_search {
  margin-right: 14px;
}

/* 图片 */
.login_item_img {
  text-align: center;
  padding-top: 2rem;
}

/* button双登录按钮 */
.login_button{
  padding: 50px 20px;
}

/* 登录-邮箱 */
.login_button .button_emil{
  margin-top: 20px;
}

/* 三个图标 */
.push_icon {
  /* color: skyblue; */
  display: flex;
  justify-content: center;
  padding: 0 10px;
  margin-top: 200px;
  color: #979797;
}

/* 三个图标文字内容样式 */
.push_icon span {
  font-size:20px;
}

/* 三个图标右边框样式 */
.commonIcon {
  padding: 0 20px;
  border-right: 1px solid #333;
  display: inline-block;
}

.push_icon .icon_weibo {
  border-right: none;
}

</style>
